import { Button, Form, Input, DatePicker } from 'antd'
import { FC } from 'react'
import styles from './baseForm.less'

interface List {
  type: string
  name: string
  placeholder: string | [string, string]
}

interface Foo {
  list: Array<List>
  onFinish: (values: any) => void
  onReset: (values: any) => void
}

const BaseForm: FC<Foo> = ({ onFinish, list, onReset }) => {
  const getItem = (item: List) => {
    switch (item.type) {
      case 'date':
        return (
          <DatePicker.RangePicker
            style={{ width: '100%' }}
            placeholder={item.placeholder as [string, string]}
          />
        )
      case 'input':
        return <Input placeholder={item.placeholder as string} />
    }
  }
  return (
    <Form onFinish={onFinish}>
      <div className={styles['form__wrap']}>
        {list.map((item, index) => {
          return (
            <div className={styles['form__item']} key={index}>
              <Form.Item name={item.name}>{getItem(item)}</Form.Item>
            </div>
          )
        })}
      </div>
      <div className={styles['form__search']}>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button type="primary" htmlType="reset" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </div>
    </Form>
  )
}

export default BaseForm
